<script lang="ts" setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'

const props = defineProps({
  data: {
    type: Array,
    required: true
  },
  colors: {
    type: Array,
    required: true
  },
  barWidth: {
    type: Number,
    default: 10
  }
})

const chart = ref<HTMLDivElement | null>()

function initChart() {
  echarts.init(chart.value).setOption({
    xAxis: {
      type: 'category',
      data: props.data.map((item: any) => item.name)
    },
    yAxis: {
      type: 'value'
    },
    series: props.data.map((item: any, index: number) => ({
      name: item.name,
      type: 'bar',
      data: item.data,
      barWidth: props.barWidth,
      itemStyle: {
        color: props.colors[index]
      }
    }))
  })
}

onMounted(() => {
  initChart()
})
</script>
<template>
  <div ref="chart" class="w-full h-96"></div>
</template>
